<template>
	<view>
		<view class="list">
			<view class="row" v-for="item in addressList" :key="item.id" @click="saveLocal(item)">
				<view class="center">
					<view class="name-tel">
						<view class="name">{{item.name}}</view>
						<view class="default" v-if="item.defaultStatus == 1">默认</view>
					</view>
					<view class="tel">{{item.phoneNumber}}</view>
				</view>
				<view class="right">
					<view class="icon" @tap.stop="goEditAddress(item.id)">
						<image src="../../../static/images/icons/edit.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="add">
			<view class="btn" @tap="goNewAddress">新增地址</view>
		</view>
	</view>
</template>

<script>
	import { findAllAddress } from "../../../api/home/address/address.js"
	export default {
		data() {
			return {
				addressList:[],
				type:''
			};
		},
		methods:{
			// 初始化地址数据
			init(){
				findAllAddress().then(res=>{
					console.log(res);
					this.addressList =  res.data.items;
				})
			},
			// 新建地址
			goNewAddress(){
				uni.navigateTo({
					url:'./newaddress/newaddress'
				})
			},
			// 编辑地址
			goEditAddress(id){
				uni.navigateTo({
					url:`./editaddress/editaddress?id=${id}`
				})
			},
			// 点击地址选项存储到本地
			saveLocal(item){
				if(this.type){
					uni.setStorageSync('address',item);
					uni.navigateBack({
						delta:1
					})
				}
			}
		},
		onShow() {
			this.init()
		},
		onLoad(options) {
			// this.init()
			this.type = options.type;
		}
	}
</script>

<style lang="scss" scoped>
	view {
		display: flex;
	}
	// 新增地址按钮
	.add {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		 .btn {
			 display: flex;
			 box-shadow: 0px 4rpx 10rpx rgba(0,0,0,.4);
			 width: 70%;
			 height: 80rpx;
			 border-radius: 80rpx;
			 background-color: #354e44;
			 color: #fff;
			 justify-content: center;
			 align-items: center;
			 font-size: 30rpx;
		 }
	}
	// 地址列表
	.list {
		width: 100%;
		flex-direction: column;
		.row {
			width: 94%;
			padding: 20rpx 0;
			border-bottom: 1Px solid #ccc;
			margin: 0 auto;
			 .center {
				 width: 100%;
				 flex-wrap: wrap;
				 flex-direction: column;
				 .name-tel {
					 margin-left: 30rpx;
					 align-items: baseline;
					 margin-bottom: 20rpx;
					  .name {
						  font-size: 28rpx;
					  }
					  .default {
						  font-size: 22rpx;
						  background-color: #354e44;
						  color: #fff;
						  padding: 0 18rpx;
						  border-radius: 8rpx;
						  margin-left: 20rpx;
					  }
				 }
				 .tel {
					 margin-left: 30rpx;
					 font-size: 24rpx;
					 color: #999;
				 }
			 }
			 .right {
				 align-items: center;
				 margin-left: 20rpx;
				  .icon {
					  justify-content: center;
					  align-items: center;
					  width: 80rpx;
					  height: 60rpx;
					  border-left: solid 1rpx #aaa;
					  font-size: 40rpx;
					  color: #777;
					   image {
						   width: 40rpx;
						   height: 40rpx;
						   opacity: .8;
					   }
				  }
			 }
		}
	}
</style>
